<template>
  <div class="inspection-form">
    <!-- 基础信息 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="任务编号">
              <el-input v-model="taskInfo.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务名称">
              <el-input v-model="taskInfo.inspectiontaskName" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- 更多基础信息表单项... -->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划名称">
              <el-input v-model="taskInfo.inspectiontaskName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划序号">
              <el-input v-model="taskInfo.inspectiontaskCode" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- 更多基础信息表单项... -->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="计划开始时间">
              <el-input v-model="taskInfo.inspectiontaskOntime" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间">
              <el-input v-model="taskInfo.inspectiontaskUntime" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- 更多基础信息表单项... -->
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="taskInfo.taskNumber" :rows="3" style="width: 1080px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 巡检人员 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>巡检人员</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="巡检班组">
              <el-input v-model="taskInfo.inspectiontaskClass" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡检人">
              <el-input v-model="taskInfo.inspectiontaskPerson" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 巡检时间 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>巡检时间</span>
      </div>
      <el-form label-position="left" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="巡检开始时间">
              <el-date-picker v-model="taskInfo.inspectiontaskOkontime" type="datetime" placeholder="请选择时间"
                style="width: 480px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡检结束时间">
              <el-date-picker v-model="taskInfo.inspectiontaskOkuntime" type="datetime" placeholder="请选择时间"
                style="width: 480px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡检用时">
              <el-input v-model="hour" style="width: 70px" placeholder="请输入" disabled></el-input>
              <span style="margin-left: 10px; margin-right: 10px">小时</span>
              <el-input v-model="minute" style="width: 70px" placeholder="请输入" disabled></el-input>
              <span style="margin-left: 10px; margin-right: 10px">分钟</span>
              <el-button type="primary"
                @click="calculateDuration(taskInfo.inspectiontaskOkontime, taskInfo.inspectiontaskOkuntime)">计算</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 巡检明细 -->
    <el-card style="margin-bottom: 100px" class="box-card">
      <div slot="header" class="clearfix">
        <span>巡检明细</span>
      </div>
      <div class="button-group">
        <el-button type="danger" size="small" @click="dialogVisible = true">跳过巡检</el-button>
        <el-button type="info" size="small" @click="exportData">导出</el-button>
      </div>
      <el-table :data="inspectionDetails" border stripe @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="sequence" label="序号" width="180" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="executeInspection(scope.row)">执行巡检</el-button>
            <el-button type="success" size="mini" @click="uploadImage(scope.row)">上传图片</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="count" label="巡检项目" width="180" align="center"></el-table-column>
        <el-table-column prop="deviceInspectiontask.inspectiontaskSkip" label="已检" width="180"
          align="center"></el-table-column>
        <el-table-column prop="deviceInspectiontask.inspectiontaskFn" label="未检" width="180"
          align="center"></el-table-column>
        <el-table-column prop="deviceInspectiontask.inspectiontaskExceptional" label="异常" width="180"
          align="center"></el-table-column>
        <el-table-column prop="equipment.code" label="设备编号" width="180" align="center"></el-table-column>
        <el-table-column prop="equipment.name" label="设备名称" width="180" align="center"></el-table-column>
        <el-table-column prop="equipment.specifications" label="规格型号" width="180" align="center"></el-table-column>
        <el-table-column prop="equipment.deviceType" label="设备类型" width="180" align="center"></el-table-column>
        <el-table-column prop="equipment.useDepartments" label="使用部门" width="180" align="center"></el-table-column>
        <el-table-column prop="equipment.storageLocation" label="存放位置" width="180" align="center"></el-table-column>
        <el-table-column prop="deviceInspectiontask.inspectiontaskOntime" label="执行时间" width="180"
          align="center"></el-table-column>
        <el-table-column prop="deviceInspectiontask.cause" label="跳过原因" width="180" align="center"></el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="project" :visible.sync="project" title="选择巡检项目" style="width: 150%; margin-left: -25%">
      <el-divider></el-divider>
      <el-form>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-input placeholder="请输入巡检项目名称/编号" style="width: 300px" v-model="condition1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-select style="width: 300px; margin-left: -60px" placeholder="请选择巡检分类" v-model="selectType">
                <el-option v-for="item in ProjectType.data" :key="item" :label="item.dictLabel"
                  :value="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item style="text-align: right">
          <el-button>重置</el-button>
          <el-button>查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="inspectionProject.records" @selection-change="handleSelectionChange1" border="0" ref="refIns"
        style="width: 100%" align="center" sortable>
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="180" align="center" fixed>
          <template slot-scope="scope">
            {{ (page - 1) * size + scope.$index + 1 }}
          </template></el-table-column>
        <el-table-column prop="deviceInspectionproject.inspectionprojectName" label="巡检项目名称" width="180"
          align="center"></el-table-column>
        <el-table-column prop="code" label="巡检项目编号" width="180" align="center"></el-table-column>
        <el-table-column prop="deviceInspectionproject.inspectionprojectTypeId" label="巡检分类" width="180" align="center">
        </el-table-column>
        <el-table-column prop="deviceInspectionproject.inspectionprojectContent" label="巡检内容" width="180"
          align="center"></el-table-column>
        <el-table-column label="巡检结果" width="180" align="center">
          <template slot-scope="scope">
            <el-span v-if="scope.row.deviceInspectionproject.inspectionprojectResult == 2">
              <el-input></el-input>
            </el-span>
            <el-span v-if="scope.row.deviceInspectionproject.inspectionprojectResult == 3">
              <el-span v-for="item in result" :key="item.options" :value="item.options">
                <el-radio v-model="isResult" :label="item" style="margin-right: 20px">{{ item.options
                  }}</el-radio>
              </el-span>
            </el-span>
            <el-span v-if="scope.row.deviceInspectionproject.inspectionprojectResult == 4">
              <el-span v-for="item in result" :key="item.options">
                <el-checkbox-group>
                  <el-checkbox v-model="isResult" :label="item" style="margin-right: 20px">{{ item.options
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-span>
            </el-span>
          </template>
        </el-table-column>
        <el-table-column label="是否正常" width="180" align="center"></el-table-column>
        <el-table-column label="备注" width="180" align="center"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="select(scope.row.deviceInspectionproject.code)">展示</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="text-align: right;margin-top: 20px">
        <el-pagination background layout="prev, pager, next, sizes, total" :total="this.inspectionProject.total"
          :page-size="this.inspectionProject.size" :sizes="this.inspectionProject.size" :page-sizes="pageselect"
          @size-change="handleSizeChange" :current-page="this.inspectionProject.current"
          @current-change="handleCurrentChange">
        </el-pagination>
      </el-row>
      <el-divider></el-divider>
      <div style="text-align: right">
        <el-button @click="clerk = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </div>
    </el-dialog>


    <!-- 表单底部按钮 -->
    <el-card class="position">
      <el-row :gutter="20">
        <el-col :offset="9" :span="6">
          <el-button @click="closeForm">关闭</el-button>
          <el-button type="primary" @click="saveDraft">暂存</el-button>
          <el-button type="success" @click="confirmForm">确认</el-button>
        </el-col>
      </el-row>

    </el-card>
    <el-dialog title="跳过巡检" :visible.sync="dialogVisible" width="30%">
      <span style="margin-bottom: 20px">跳过原因</span>
      <el-form>
        <el-form-item>
          <el-input type="textarea" v-model="skipReason" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="skipInspection">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDetail } from '@/api/inspection/inspectionTask';
import { InsList } from '@/api/inspection/inspectionTask';
import { selectZi } from "@/api/eastjet-maintenance/type/type";
import { selectList } from '@/api/inspection/inspectionTask';
import { updateState, updateTask } from '@/api/inspection/inspectionTask';
import { updateSkip } from '../../api/inspection/inspectionTask';


export default {
  data() {
    return {
      dialogVisible: false,
      skipReason: "",
      taskInfo: {},
      tasks: {},
      hour: 0,
      minute: "",
      project: "",
      page: 1,
      size: 10,
      pageselect: [10, 20, 30, 40, 50],
      inspectionDetails: [
        // 添加巡检明细数据...
      ],
      inspectionProject: [],
      mulitiSelect: [],
      mulitiSelect1: [],
      zhi: "sys_inpectionpro_type",
      ProjectType: [],
      result: [],
      skip: {
        "code": "",
        "cause": "",
        "skipNumber": ""
      },
      selectType: "",
      radio: [],
      tableData: {
        code: "",
        isResult: "",
        deviceCode: "",
        project: "",
        codeType: "",
      },
      isResult: "",
      deviceCode: "",
    };
  }, mounted() {
    this.taskInfo = this.$route.query;
    this.init();
    this.ProList(this.taskInfo.inspectiontaskCode);

  },
  methods: {
    init() {
      
      console.log(this.taskInfo);
      this.taskInfo.inspectiontaskOkontime = new Date(this.taskInfo.inspectiontaskOkontime);
      this.taskInfo.inspectiontaskOkuntime = new Date(this.taskInfo.inspectiontaskOkuntime);
      this.project = false;
      getDetail(this.taskInfo.code).then((res) => {
        console.log("res", res.data);
        this.inspectionDetails = res.data;
      });
      console.log("info", this.$route.query);
      selectZi(this.zhi).then((res) => {
        this.ProjectType = res.data;
        console.log("字典", this.ProjectType);
      });
    },
    calculateDuration(date1, date2) {
      const oneHour = 60 * 60 * 1000; // 一小时的毫秒数
      console.log(date1, date2);
      const diffInTime = Math.abs(date2 - date1);
      const diffInHours = Math.round(diffInTime / oneHour);
      this.hour = diffInHours;
      const oneMinute = 60 * 1000; // 一分钟的毫秒数
      const diffInDate = Math.abs(date2 - date1);
      const diffInMinutes = Math.floor((diffInDate % oneHour) / oneMinute);;
      this.minute = diffInMinutes;
      this.taskInfo.inspectiontaskTime = diffInHours + "小时" + diffInMinutes + "分钟";
      // 计算巡检用时的方法
    },
    select(val) {
      console.log("123", val);
      selectList(val).then((res) => {
        this.result = res.data;
        console.log("select", this.result);
      })
    },
    ProList(val) {
      InsList(this.page, this.size, val).then((res) => {
        this.inspectionProject = res.data;
        this.deviceCode = val;
        console.log(res.data);
      });
    },
    actionIns() {
      console.log("device",this.deviceCode);
      this.radio.push({ "result": this.isResult.judgment, "options": this.isResult.options });
      this.tableData.deviceCode = this.deviceCode;
      this.tableData.codeType = this.taskInfo.inspectiontaskCode;


      for (let j = 0; j < this.radio.length; j++) {
        this.tableData.isResult = this.radio[j].result;
        this.tableData.options = this.radio[j].options;

        for (let i = 0; i < this.mulitiSelect.length; i++) {
          console.log("123",this.mulitiSelect[i]);
          this.tableData.project = this.mulitiSelect[i].code;
      console.log("tableData",this.tableData);

          updateState(this.tableData).then((res) => {
            console.log(res);
          });
          console.log("tab",this.tableData);
        }


      }

    },
    handleConfirm() {
      this.project = false;
    },
    skipInspection() {
      // 跳过巡检的操作
      this.skip.code = this.taskInfo.code;
      this.skip.cause = this.skipReason;
      this.skip.skipNumber = this.mulitiSelect1.length;
      this.dialogVisible = false;

    },
    exportData() {
      // 导出数据的操作
    },
    executeInspection(row) {
      // 执行巡检的操作
      this.project = true;
      console.log(row);
      this.ProList(this.taskInfo.inspectiontaskCode);
      this.tableData.code = row.code;

    },
    handleSelectionChange1(val) {
      this.mulitiSelect = val;
    },
    handleSelectionChange(val) {
      this.mulitiSelect1 = val;
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },

    handleSizeChange(size) {
      this.size = size;
      console.log(size);
      this.init();
    },
    uploadImage(row) {
      // 上传图片的操作
    },
    closeForm() {
      // 关闭表单的操作
      this.$router.push({ path: "/xun/xun/task" });
    },
    saveDraft() {
      // 暂存表单的操作
    },
    confirmForm() {
      // 确认表单的操作
      const year = new Date(this.taskInfo.inspectiontaskOkontime).getFullYear();
      const month = new Date(this.taskInfo.inspectiontaskOkontime).getMonth() + 1;
      const day = new Date(this.taskInfo.inspectiontaskOkontime).getDate();
      const hour = new Date(this.taskInfo.inspectiontaskOkontime).getHours();
      const minute = new Date(this.taskInfo.inspectiontaskOkontime).getMinutes();
      const sencond = new Date(this.taskInfo.inspectiontaskOkontime).getSeconds();
      console.log("时间：" + year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + sencond);
      const date1 = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + sencond;
      const year1 = new Date(this.taskInfo.inspectiontaskOkuntime).getFullYear();
      const month1 = new Date(this.taskInfo.inspectiontaskOkuntime).getMonth() + 1;
      const day1 = new Date(this.taskInfo.inspectiontaskOkuntime).getDate();
      const hour1 = new Date(this.taskInfo.inspectiontaskOkuntime).getHours();
      const minute1 = new Date(this.taskInfo.inspectiontaskOkuntime).getMinutes();
      const sencond1 = new Date(this.taskInfo.inspectiontaskOkuntime).getSeconds();
      console.log("时间：" + year1 + "-" + month1 + "-" + day1 + " " + hour1 + ":" + minute1 + ":" + sencond1);
      const date2 = year1 + "-" + month1 + "-" + day1 + " " + hour1 + ":" + minute1 + ":" + sencond1;
      this.taskInfo.inspectiontaskOkontime = date1;
      this.taskInfo.inspectiontaskOkuntime = date2;
      console.log(this.taskInfo.inspectiontaskOkontime);
      if (this.mulitiSelect1.length != 0) {
        updateSkip(this.skip).then((res) => {
          console.log(res);
        });
      }else if(this.mulitiSelect1.length>1){
          this.$message.error("请选择单个设备");
      }else{
         console.log("111",this.taskInfo.inspectiontaskTime); 
      if(this.taskInfo.inspectiontaskTime!="12960"){
     updateTask(this.taskInfo).then((res) => {
        if (res.data == "修改成功") {
          this.actionIns();
          this.$message.success("修改成功");
          this.closeForm();
        }
      });
      }else{
        this.$message.error("请计算巡检用时");
      }
 
      }
      this.taskInfo.name=this.$store.state.user.name;
  
    },
  },
};
</script>

<style scoped>
.position {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 1;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.inspection-form {
  padding: 20px;
}

.box-card {
  margin-bottom: 40px;
  width: 95%;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>